<template>
  <div>
    <Row style=" padding: 10px 10px; border-bottom: 1px solid #F5F6FA;">
      <Col :span="24">
      <div style="float:right">
        <span style="margin-right: 8px;">{{ waterText.WATER_LOCATION }}</span>
        <Select v-model:value="positionValue" show-search :placeholder="`请输入${waterText.WATER_METER_TITLE}`"
          :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null"
          :options="options1" @search="handleSearch" @select="handleSelect" @change="selectChange" style="width:200px;" size="middle"
          :allowClear = "true"
          >
        </Select>
      </div>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
import { ref,toRefs, unref } from 'vue'
import { Row, Col, Select } from 'ant-design-vue';
import { waterText } from '../enum/index';

const props = defineProps<{
      dataSourse : object[] | undefined,
      direction : string
}>();
const emits = defineEmits(['selectChange',"initData"]);
const { dataSourse } = toRefs(props);
const { direction } = props;
const options1 = ref<object[]>([]);
const positionValue = ref<any>();

const selectChange = (value:string)=>{
  if(!value){
    emits("initData");
  }
}

const handleSearch = (val: string) => {

  if(unref(dataSourse)){
    const returnOptions = handleData(val,dataSourse);
    options1.value = returnOptions;
  }
  
 
  
  // options1.value = [
  //   { value: '1', label: '12456' },
  //   { value: '2', label: '1245678' },
  //   { value: '3', label: '12456789' },
  // ]

}

const handleSelect = (value,option)=>{
  console.log("handleSelect---",value);
  console.log("handleSelect-option--",option);
  emits("selectChange",direction,value);
}

const handleData = (value:string,dataS:object[])=>{
   let returnData:object[] = [];
   let newData = unref(dataS);
   for(let i=0;i<newData.length;i++){
     let newValue = newData[i].user_meter_code + "";
     if(newValue.indexOf(value) !== -1){
        returnData.push({
          label : newValue,
          value : newValue
        })
     }
   }
     console.log("returnData---",returnData);

   return returnData;
}

</script>